<!-- 拟稿人选人组件，单选 -->
<template>
  <van-action-sheet v-model="showCompo" :close-on-click-overlay="false" @closed="closeSheet" title="人员" cancel-text="确定">
    <view class="topsearch">
      <van-field v-model="filterText" label="" placeholder="输入关键字进行过滤" :clearable="true" />
    </view>
    <view class="my-container">
      <view class="tree-left">
        <ly-tree :tree-data="treeData" :props="props" ref="drafter" node-key="deptId"
                 :default-expanded-keys="expandKeys" @node-click="handleNodeClick"
                 :filter-node-method="filterNode" :highlightCurrent="true" :currentNodeKey="currentNodeKey"/>
      </view>
      <view class="tree-right">
        <van-radio-group v-model="checkedUserId">
          <view v-show="emptyData" class="text-center text-gray padding-top-sm">暂无数据</view>
          <van-cell-group>
            <van-cell v-for="(item,index) in userArr" title-style="margin-left:15rpx" :title="item.userName"
                      clickable @click="selectUser(item.userId,item.userName)">
              <template #icon>
                <van-radio :name="item.userId" icon-size="30rpx" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </view>
    </view>
  </van-action-sheet>
</template>

<script>
export default {
  props: {
    showDrafter: {
      type: Boolean,
      default: false
    },
    drafterData:{
      userName:{
        type:String,
        default:''
      },
      userId:{
        type:String,
        default:''
      }
    },
  },

  data() {
    return {
      showCompo: false, //当前组件是否显示
      expandKeys: ["0","001"], //默认展开的节点-对应的deptId的值
      props: function() {
        return {
          // 这里的label就可以使用函数进行自定义的渲染了
          // label(data, node) {
          // 	return '节点' + node.data.personName;
          // },
          label: 'deptName', // 指把数据中的‘personName’当做label也就是节点名称
          children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
        }
      },
      filterText: '',
      treeData: [],
      deptName: [], //选中的单位信息
      deptCode: [], //选中的单位信息
      dept: '',
      deptId:'',
      userArr:[],//当前单位下的所有人员
      checkedUserId:'',//选中的人id
      checkedUserName:'',//选中人的姓名
      emptyData:true,//如果没有数据显示暂无数据
      //选中的人员信息
      userInfo:{
        userId:'',
        userName:''
      },
      showNode:'',//要显示的机构节点
      hideNode:'',//要隐藏的机构节点
      page:1,
      rows:100,
      currentNodeKey:""
    }
  },
  mounted() {
    //获取要显示的组织机构代码
    this.getShowDept()
    // //获取当前用户所在的处室信息
    this.cuserchudept()
  },
  watch: {
    showDrafter(val){
      this.showCompo = val
    },
    filterText(val) {
      this.$refs.drafter.filter(val);
    },
    drafterData:{
      handler(nVal, oVal) {
        if (this.util.isNotEmpty(nVal)){
          if(nVal.userId != ''){
            this.checkedUserId=nVal.userId
            this.checkedUserName = nVal.userName
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    closeSheet(){

      //关闭的时候把选中的人的信息传回父组件
      //userInfo: {"userId":"4926","userName":"高萌"}
      this.userInfo.userId =this.checkedUserId
      this.userInfo.userName = this.checkedUserName
      this.$emit('closeDrafterSheet',this.userInfo)
    },
    // 只要节点的选中状态改变就触发（包括设置默认选中，点击选中/取消选中），会被触发多次
    handleRadioChange(obj) {
      if(obj.checked == true){
        this.dept = obj.node.data.deptName
        this.deptId = obj.node.data.deptId
      }else{
        this.dept = ''
        this.deptId = ''
      }
      // console.log('handleRadioChange', obj);
    },

    // 选人
    handleNodeClick(obj) {
      // console.log(obj.data.deptName)//单位名称
      // console.log(obj.data.deptId)//单位id
      this.dept = obj.data.deptName
      this.deptId = obj.data.deptId
      this.getUserInfo()
      // console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
    },
    //呈报单位查询
    filterNode(value, data) {
      if (!value) return true;
      return data.deptName.indexOf(value) !== -1;
    },

    onSelectDocType(item) {
      this.docType = item.name
      this.showDocType = false
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },

    //获取要显示的组织机构代码
    getShowDept() {
      this.$http({
        url: this.$http.adornUrl(`/caac/oa/doc/fw/getShowDept`),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.cache.get('userInfo').systemKey,//固定值
          'systemFlag': this.cache.get('userInfo').systemFlag//固定值
        })
      }).then(({data}) => {
        if (data.code == 200) {
          if (data.data != null) {
            this.showNode = data.data.hideDepts
            this.hideNode = ''//要隐藏的节点
          }
          this.getOrgTree()
        }
      })
    },

    getOrgTree(){
      this.$http({
        url: this.$http.adornUrl(`/caac/platform/org/depts/orgDeptTree`),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.cache.get('userInfo').systemKey,//固定值
          'systemFlag': this.cache.get('userInfo').systemFlag,//固定值
          'showNode':this.showNode,
          'hideNode':this.hideNode
        })
      }).then(({data}) => {
        // console.log("单位信息data: " + JSON.stringify(data.data));
        if(data.code==200){
          this.treeData = this.util.treeDataTranslate(data.data,'deptId','parentId')
          // console.log("orgTree: " + JSON.stringify(orgTree));

        }
      })
    },

    //获取呈报人列表
    getUserInfo(){
      this.userArr=[]//每次获取清空
      this.emptyData = false
      var _this = this
      this.$http({
        url: this.$httploading.adornUrl(`/caac/platform/org/users/getUserByDeptIdAndParams`),
        method: 'get',
        params: this.$http.adornParams({
          'deptId': this.deptId,//单位id
          'page': this.page,
          'rows': this.rows,
          'systemKey': this.cache.get('userInfo').systemKey, //固定值
          'systemFlag': this.cache.get('userInfo').systemFlag, //固定值
        })
      }).then(({data}) => {
        // console.log("data: " + JSON.stringify(data));
        if(data.code==200){
          if(data.data.total>0){
            this.userArr=data.data.rows
          }else{
            this.emptyData = true
          }
        }
      })
    },
    //选中的用户
    selectUser(userId,userName){
      if(userId == this.checkedUserId){
        this.checkedUserId = ""//如果再次点击，则取消选中
        this.checkedUserName=""
      }else{
        this.checkedUserId = userId
        this.checkedUserName = userName
      }
    },
    //获取当前用户所在的处室信息
    cuserchudept(){
      this.$http({
        url: this.$http.adornUrl(`/caac/oa/comm/comm/cuserchudept`),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.cache.get('userInfo').systemKey,//固定值
          'systemFlag': this.cache.get('userInfo').systemFlag,//固定值
        })
      }).then(({data}) => {
        console.log("获取当前用户所在的处室信息: " + JSON.stringify(data.data));
        if(data.code==200){
          if(this.util.isNotEmpty(data.data)){
            this.expandKeys=[]
            data.data.allParentId.split(',').forEach((item)=>{
              this.expandKeys.push(item.toString())
            })
            this.deptId = data.data.deptCode
            this.currentNodeKey = this.deptId
            this.getUserInfo()
          }

          // console.log("orgTree: " + JSON.stringify(orgTree));

        }
      })
    },
  }
}
</script>

<style>
.van-action-sheet {
  z-index: 9999;
  min-height: 100%;
}
.topsearch{
  position: fixed;
  height: 90rpx;
  z-index: 99;
  width: 100%;
  border: 1rpx solid #f0f0f0;
}
.my-container{
  margin-top: 90rpx;
  display: flex;
  flex-direction: row;
}
.tree-left{
  margin-top: -20rpx;
  width: 65%;
  border-right: 1rpx solid #f0f0f0;
}
.tree-right{
  width: 35%;
  position: fixed;
  right: 0rpx;
  max-height: 750rpx;
  overflow: scroll;
}
</style>
